<template>
	<tip-list title="工作落实" :class="{headclass:headclassBol}">
		<div class="public-form inner-container">
			<div class="clearfix search-header">
				<ul class="input list clearfix">
					<li>
						<my-tooltip text="项目名称"></my-tooltip>
						<div class="box">
							<el-input v-model="searchFrom.keyword" placeholder="请输入项目名称"></el-input>
						</div>
					</li>
					<div style="height:65px;padding:5px 0px 0px 0px;float:left">
						<el-button @click="reset" style="float:right;width:120px">重置</el-button>
						<el-button type="primary" @click="queryList()" style="float:right;margin-right:20px;width:120px">查询</el-button>
					</div>
				</ul>
			</div>
			<el-table :data="menuList" highlight-current-row class="table" style="width: 100%" :height="tableHeight" @current-change="handleCurrentChange">
				<el-table-column label="项目名称" width="280">
					<template scope="scope">
						<el-button :style="SetRowHeadLeft(scope.row)" @click="InsertTr(scope.$index, scope.row,scope)" type="text" showType="(0)" :class="scope.row.class">
						</el-button>
						{{ scope.row.name }}
					</template>
				</el-table-column>
				<!--<el-table-column prop="name" label="项目名称" width="200" show-overflow-tooltip>
				</el-table-column>-->
				<el-table-column prop="workContent" label="任务" width="350" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="overDeadLine" label="完成时限" width="150" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="responseUnit" label="责任单位" width="150" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="progressSituation" label="工作进展情况" width="350" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="inputUnit" label="上报单位" width="100" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="status" label="任务状态" width="100" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="remarks" label="备注" show-overflow-tooltip>
				</el-table-column>
			</el-table>
			<div class="page" v-show="total">
				<el-pagination :current-page="searchFrom.current" :page-size="searchFrom.size" @size-change="handleSizeChange" @current-change="pageChange" layout="total,prev, pager, next,jumper" :total="total">
				</el-pagination>
			</div>
			<info-detail v-if="showdetail" :showDialogId="showDialogId" :showDialog.sync="showdetail"></info-detail>
			<info-edit v-if="showEdit" :showDialogId="showDialogId" :showDialog.sync="showEdit"></info-edit>
		</div>
	</tip-list>
</template>
<script>
	import tipList from '../../public/TidiList'
	import infoDetail from '../Project/projectinfoDialog/InfoDetail.vue'
	import infoEdit from '../Project/projectinfoDialog/InfoEdit.vue'

	export default {
		components: {
			tipList,
			infoDetail,
			infoEdit
		},
		created() {

			this.ajax({
				url: 'tDictionary/selectDictionaryByCode',
				data: {
					code: 'P1'
				}
			}).then(data => {
				this.unitList = data;
				this.ajax({
					url: 'tDictionary/selectDictionaryByCode',
					data: {
						code: 'P2'
					}
				}).then(data => {
					this.statusList = data;
					this.queryList();
				})
			})

		},
		mounted() {
			setTimeout(() => {
				this.headclassBol = true;
			}, 500)
			//分辨率宽度大于等于1920table高度自适应
			if($(window).width() >= 1920) {
				//得到初始高度
				let contentHeight = $('.content').height(),
					wrapListHeight = $('.view-box-header').height(),
					warpBoxHigeht = $('.list').height(),
					typeBoxHigeht = $('.typeClass').height(),
					pageHigeht = $('.page').height();
				this.tableHeight = contentHeight - wrapListHeight - warpBoxHigeht - typeBoxHigeht - pageHigeht - 120
				console.log(wrapListHeight, warpBoxHigeht, contentHeight, pageHigeht, typeBoxHigeht, this.tableHeight)
				//计算显示高度
				var timer = null;
				$(window).resize(() => {
					clearTimeout(timer)
					timer = setTimeout(() => {
						let contentHeight = $('.content').height(),
							wrapListHeight = $('.view-box-header').height(),
							warpBoxHigeht = $('.list').height(),
							typeBoxHigeht = $('.typeClass').height(),
							pageHigeht = $('.page').height();
						this.tableHeight = contentHeight - typeBoxHigeht - wrapListHeight - warpBoxHigeht - pageHigeht - 120
					}, 200)
				})
			} else {
				this.tableHeight = "";
			}
		},
		destroyed() {
			//移除监听
			$(window).unbind()
		},
		data() {
			return {
				headclassBol: false,
				menuList: [],
				searchFrom: {
					current: 1, //页码
					size: 15, //每页条数
					name: '', //名称
				},
				total: 0, //总条数
				tableHeight: '', //table高度
				tableData: [],
				showdetail: false, //显示dialog状态
				showEdit: false,
				showDialogId: '', //显示对于dialogID
				unitList: [],
				statusList: []
			}
		},
		methods: {
			handleCurrentChange(val) {
				this.selectedRow = val;
			},
			queryList(type) {
				/*如果是点击查询，页码初始化为1*/
				if(type && this.searchFrom.current != 1) {
					this.searchFrom.current = 1
					return false
				}
				this.ajax({
					url: 'tProjectSupervisor/selectWorkPracticablePage',
					data: this.searchFrom
				}).then(data => {
					this.total = data.total
					//this.tableData = data.records
					this.menuList = [];
					this.HandleTreeGrid(this.HandleFormateData(this.HandleDictionary(this.HandleStatusDictionary(data.records))), this.menuList);
					this.menuList.forEach((item) => {
						item.class = this.GetIsOpenClass(item);
					});
				})
			},
			HandleDictionary(treeNode) {
				console.log(treeNode)
				for(var item of treeNode) {
					if(item.workPracticable && item.workPracticable.length > 0) {
						item.workPracticable.forEach((node) => {
							if(node.responseUnit) {
								var unitids = node.responseUnit.split(',');
								var unitnames = "";
								for(var j = 0; j < unitids.length; j++) {
									for(var k = 0; k < this.unitList.length; k++) {
										if(unitids[j] == this.unitList[k].id) {
											unitnames += this.unitList[k].name + ' ';
										}
									}
								}
								node.responseUnit = unitnames;
							}

							if(node.inputUnit) {
								var inputunitids = node.inputUnit.split(',');
								var inputunitnames = "";
								for(var j = 0; j < inputunitids.length; j++) {
									for(var k = 0; k < this.unitList.length; k++) {
										if(inputunitids[j] == this.unitList[k].id) {
											inputunitnames += this.unitList[k].name + ' ';
										}
									}
								}
								node.inputUnit = inputunitnames;
							}
						});
					}
				}
				return treeNode;
			},
			HandleStatusDictionary(treeNode) {
				for(var item of treeNode) {
					if(item.workPracticable && item.workPracticable.length > 0) {
						item.workPracticable.forEach((node) => {
							var statusname = "";
							for(var k = 0; k < this.statusList.length; k++) {
								if(node.status == this.statusList[k].id) {
									statusname = this.statusList[k].name;
								}
							}
							node.status = statusname;
						});
					}
				}
				return treeNode;
			},
			HandleFormateData(tree) {
				for(var i = 0; i < tree.length; i++) {
					if(tree[i].workPracticable.length > 0) {
						tree[i].workContent = tree[i].workPracticable[0].workContent;
						tree[i].overDeadLine = tree[i].workPracticable[0].overDeadLine;
						tree[i].responseUnit = tree[i].workPracticable[0].responseUnit;
						tree[i].progressSituation = tree[i].workPracticable[0].progressSituation;
						tree[i].status = tree[i].workPracticable[0].status;
						tree[i].remark = tree[i].workPracticable[0].remark;
						//						for(var j=0;j<tree[i].workPracticable.length;j++){
						//							tree[i].workPracticable[j].name=tree[i].name;
						//						}
					}
				}
				return tree;
			},
			HandleTreeGrid(treeNode, menuList) {
				for(var item of treeNode) {
					menuList.push(item);
					if(item.workPracticable && item.workPracticable.length > 0) {
						if(item.childs == undefined) {
							item.childs = [];
						}
						item.isOpen = true;
						item.workPracticable.forEach((node) => {
							item.childs.push(node);
						});
						this.HandleTreeGrid(item.workPracticable, menuList);
					}
				}
			},
			SetRowHeadLeft(row) {
				return {
					'margin-left': ((parseInt(row.level) - 1) * 20) + 'px',
					'margin-right': ((parseInt(row.level)) * 5) + 'px'
				};
			},
			InsertTr(index, row, scope) {
				if(!row.isOpen) {
					if(row.childs && row.childs.length > 0) {
						this.InsertChildTableData(index, row);
					}
				} else {
					if(row.childs) {
						if(row.childs.length > 0) {
							this.RemoveChildTableData(index, row);
						}
					}
				}
			},
			GetIsOpenClass(row) {
				if(row.workPracticable) {
					return {
						'el-icon-arrow-down': row.isOpen != undefined && row.isOpen == true,
						'el-icon-arrow-right': row.isOpen == undefined || row.isOpen == false
					};
				} else {
					return {
						'iocClose': true
					};
				}
			},
			DataFormatter(row, column) {
				if(row.enable == null || !row.enable) {
					return "否";
				} else {
					return "是";
				}
			},
			RemoveChildTableData(index, row) {
				let num = this.HandleRowChildCount(row);
				this.menuList.splice(index + 1, num);
				row.isOpen = false;
				row.class = this.GetIsOpenClass(row);
			},
			HandleRowChildCount(row) {
				if(row.childs != undefined && row.isOpen) {
					if(row.childs.length > 0) {
						let i = parseInt(row.childs.length)
						row.childs.forEach((item) => {
							i = i + this.HandleRowChildCount(item);
						});
						return i;
					} else {
						return 0;
					}
				} else {
					return 0;
				}

			},
			InsertChildTableData(index, row) {
				this.HandleAddChild(index, row);
				if(row.childs.length == 0) {
					row.hasChild = false;
				}
				row.isOpen = true;
				row.class = this.GetIsOpenClass(row);
			},
			HandleAddChild(index, row) {
				if(row.childs.length > 0) {
					row.childs.forEach((item, i) => {
						index = index + 1;
						this.menuList.splice(index, 0, item);
						if(item.isOpen && item.childs != undefined) {
							index = this.HandleAddChild(index, item);
						}
					})
					return index;
				}
			},
			pageChange(val) {
				this.searchFrom.current = val
				this.queryList()
			},
			//输入页码跳转
			handleSizeChange() {
				this.searchFrom.current = val
				this.queryList()
			},
			reset() { //查询框重置
				this.searchFrom.keyword = '', //名称
					this.queryList();
			}
		}
	}
</script>
<style lang="less" scoped>
	.headclass {
		width: 99%;
	}
	
	.public-form {
		.search-header {
			position: relative;
			.search-btn {
				position: absolute;
				top: 4px;
				right: 0;
			}
		}
		ul.input {
			float: left;
			// padding-right: 200px;
			// margin-left:-25px;
			width: 100%;
			li {
				float: left;
				width: 25%;
				padding: 5px 0 5px 20px;
				margin-bottom: 5px;
				span {
					float: left;
					width: 80px;
					line-height: 36px;
					display: block;
					text-indent: 5px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.box {
					width: 100%;
					padding-left: 160px;
				}
			}
		}
	}
</style>
<style lang="less">
	.public-form {
		.desc {
			overflow: hidden;
			text-overflow: ellipsis;
			word-break: break-all;
			white-space: nowrap;
		}
		.el-form-item__label {
			overflow: hidden;
			text-overflow: ellipsis;
			word-break: break-all;
			white-space: nowrap;
		}
		.el-textarea__inner {
			height: 87px;
		}
		.el-date-editor.el-input {
			width: 100%;
		}
		.el-select {
			width: 100%;
		}
	}
</style>